<template>
  <div class="app-container customer-div">
    <!--数据列表-->
    <div class="table-container">
      <vxe-grid ref='xGrid'  v-bind="gridOptions" size="mini" :loading="listLoading"  @checkbox-change="checkboxChange">
        <template #form>
          <!--搜索-->
          <div>
            <div style="background: #f5f7fa;padding:15px 15px 0 15px;border:1px solid #EBEEF5;border-bottom:0.5px solid #EBEEF5;">
              <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
                <el-form-item label="客户编号" >
                  <el-input v-model="listQuery.customerNumber"></el-input>
                </el-form-item>
                <el-form-item label="业务员" >
                  <el-select></el-select>
                </el-form-item>
                <el-form-item label="申请日期" >
                  <el-date-picker
                    v-model="listQuery.inquiryDate"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button
                    @click="handleSearchList()"
                    type="primary">
                    查询
                  </el-button>
                  <el-button
                    @click="InitiateApproval()"
                    type="primary">
                    发起审批
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </template>
        <template #pager>
          <div style="overflow: hidden">
            <div class="pagination-container" style="float:right;">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize"
                :page-sizes="[10,15,20,50,100,200]"
                :total="count">
              </el-pagination>
            </div>
          </div>
        </template>
        <template #toolbar_buttons>
          <el-radio-group v-model="type" size="small"  @change="changeType">
            <el-radio-button label="1">全部(0)</el-radio-button>
            <el-radio-button label="2">审批中(0)</el-radio-button>
            <el-radio-button label="3">已完成(0)</el-radio-button>
            <el-radio-button label="4">审批拒绝(0)</el-radio-button>
            <el-radio-button label="5">我发起的(0)</el-radio-button>
            <el-radio-button label="6">我审批的(0)</el-radio-button>
            <el-radio-button label="7">已取消(0)</el-radio-button>
          </el-radio-group>
        </template>

        <template #num1_default="{ row, rowIndex }">
          <el-link @click="toDetail(row)" type="primary"  style="font-size:12px;">{{row.orderSn}}</el-link>
        </template>
        <template #num2_default="{ row, rowIndex }">
          <span>{{row.expectSendDate}}</span>
          <span style="background: red;color:#fff;padding:0 5px;border-radius: 5px" v-if="row.urgentType == '必须'">必须</span>
          <span style="background:#ff6600;color:#fff;padding:0 5px;border-radius: 5px" v-if="row.urgentType == '可延1-2天'">1-2天</span>
          <span style="background:#ff9900;color:#fff;padding:0 5px;border-radius: 5px" v-if="row.urgentType == '可延1-2周'">1-2周</span>
          <span style="background:#0099ff;color:#fff;padding:0 5px;border-radius: 5px" v-if="row.urgentType == '等客户通知'">等待</span>
        </template>

        <template #num3_default="{ row, rowIndex }">
          <el-button style="margin-right:10px;" type="text" size="small"  @click="showPop2(row)">取消审批</el-button>
          <el-button style="margin-right:20px;" type="text" size="small"  @click="addOrder(row)">查看审批</el-button>
        </template>
        <template #num4_default="{ row, rowIndex }">
          <table style="border-collapse: collapse; text-align: center; width: 100%;"  >
             <tr v-for="(item,index) in approvelContent">
               <td style="width: 30%;">{{item}}</td>
               <td style="width: 70%;"></td>
             </tr>
          </table>
        </template>
      </vxe-grid>
    </div>



  </div>
</template>

<script>

import {getCustomerList,getPriceList} from '@/api/allInLine/inquiry'
import {getGoodsList} from '@/api/allInLine/goods'
import {formatDate} from '@/utils/date';
import store from '@/store'
import { mapGetters } from 'vuex'

const defaultListQuery={
  inquiryState : "", //询价状态(0待报价、10已取消询价、20待采购报价、30待采购确认价格、40待物流报价、50待成交、60未成交、70已下单)
  pageNum: 1,
  pageSize: 10,
  tab : "today", //类型(今日询价：today,我创建的：myCreate,我负责的：myCharge,全部询价:all)
  freightState : "",//物流状态(0未询运费，10待物流报价，20物流已报价)
  customerName : "",//客户名称
  inquiryDate : [], //询价时间
  goodsSn:'', // 牌号
  customerNumber:'',
};

export default {
  name: "index",
  data(){
    return{
      roles:store.getters.roles ? store.getters.roles : [],
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      approvelContent:['客户名称','商品名称','数量','单价','毛利','备注'],
      count:0,
      listLoading:false,
      goodsSnlist:[], //商品牌号
      loading:false,
      loading2:false,
      customerList:[],
      options:[],
      type:1,
      gridOptions:{
        loading:this.listLoading,
        border: true,
        id: 'approvalAgreement',
        align:'center',
        autoResize:true,
        height:800,
        size:'mini',
        rowConfig: {
          keyField: 'ogId',
          isHover: true
        },
        columnConfig: {
          resizable: true
        },
        customConfig: {
          storage: true,
        },
        checkboxConfig:{
          reserve:true
        },
        toolbarConfig: {
          zoom: true,
          custom: true,
          slots: {
            buttons: 'toolbar_buttons',
          }
        },
        columns: [
        {
            field: '',
            title: '业务员',
            width: 100,
          },
          {
            field: '',
            title: '审批类型',
            width: 100,
          },
          {
            field: '',
            title: '申请时间',
            width: 100,
          },
          {
            field: '',
            title: '合同号',
            width: 150,
          },
          {
            field: '',
            title: '审批内容',
            width: 300,
            slots:{
              default:'num4_default',
            }
          },
          {
            field: '',
            title: '状态',
            width: 100,
          },
          {
            field: '',
            title: '完成时间',
            width: 100,
          },
          {
            field: '',
            title: '更新时间',
            width: 100,
          },
          {
            field: '',
            title: '当前审批人',
            width: 150,
          },
          {
            field: '',
            title: '操作',
            width: 150,
            fixed:'right',
            slots: {
              // 使用插槽模板渲染
              default: 'num3_default',
            }
          },
        ],
        data:[{}],
      },
      records:[],

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  created() {
    this.getList()
    // this.getListData();
    // this.getUserOptionList();


  },
  components : {
  },
  filters: {
    formatTime(time) {
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd')
    },
  },
  methods:{
    // 获取商品牌号
    getGoodsSnList(queryString){
      getGoodsList({keywords:queryString,categoryName:''}).then(res=>{
          this.goodsSnlist= res.list
      })

    },
     //去详情页
     toDetail(item){
          localStorage.setItem('orderDetail', JSON.stringify(this.listQuery));
          let routeData = this.$router.resolve({name:'allInLineOrderDetail',query:{item}});
          window.open(routeData.href);
        },

    //生成订单
    addOrder(){
      this.$refs.addOrder.showPop()
    },

    //获取询价列表
    getList() {
      this.listLoading = true;
      let listQuery = JSON.parse(JSON.stringify(this.listQuery))
      // listQuery.chargeId = listQuery.tab == 'myCharge' ? '' : listQuery.chargeId;
      // listQuery.isResource = listQuery.tab == 'myCharge' ?  listQuery.isResource : '';
      getPriceList(listQuery).then(res => {
        this.gridOptions.data = res.content.list;
        this.count = res.content.count;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      });
    },
    checkboxChange(checked){
      this.records = JSON.parse(JSON.stringify(checked.records));
    },
    changeType(type){
      this.type = type;
      this.handleSearchList()
    },

    /**
     * 切换选择状态
     */
    handleSelect(key, keyPath){
      this.listQuery.tab = key;
      if(key=='myCreate'|| key =='all'){
        this.getMyCustomerName()
        this.gridOptions.columns.forEach((item,index)=>{
          var c = JSON.parse(JSON.stringify(item))
          if(c.visible == false){
            c.visible=!c.visible
          }
          this.gridOptions.columns.splice(index,1,c)
        })
      }
      else if (key=='today'){
        this.gridOptions.columns.forEach((item,index)=>{
          var c = JSON.parse(JSON.stringify(item))
          if(c.visible){
            c.visible= !c.visible
          }
          this.gridOptions.columns.splice(index,1,c)
        })
      }
      // this.gridOptions.columns.forEach((el,index)=>{
      //   let array = '品名牌号,收货地,期望到货时间,数量,交货方式,结算方式,询价时间,报价,销售还价,交期,发货地,发货方式,结算方式,供货方,报价人,报价时间,报价状态,运费报价,运费报价人,运费状态,运费报价时间,最低毛利,指导毛利,成交状态,未成交原因,操作'
      //   var c = JSON.parse(JSON.stringify(el))
      //   if(array.indexOf(el.title) == -1 || index == 0){
      //     c.visible = this.listQuery.tab != 'today';
      //   }else{
      //     c.visible = true
      //   }
      //   this.gridOptions.columns.splice(index,1,c)
      // })
      this.handleSearchList();
    },

    // 获取我的客户名称
    getMyCustomerName(){
      getCustomerList({keywords:''}).then(res=>{
        this.customerList = res.content;
      })
    },
    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getList();
    },

    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getList();
    },

  },
}
</script>

<style scoped lang="scss">
  td{
    border: 1px solid rgb(192, 191, 191);
  }
</style>
